<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html lang="en">

<head>
    <!-- Head Load -->
	<jsp:include page="common/LoadHead.jsp"></jsp:include>
    <title>大屯小卖部 - My Page</title>  
</head>

<body>
    <div class="bw">
        <div class="fu">
            <div class="ge aom">
                <nav class="aot">
                    <!-- Logo Image Load -->
                    <jsp:include page="common/LoadLogoImage.jsp"></jsp:include>
                    <div class="collapse and" id="nav-toggleable-sm">
                        <ul class="nav of nav-stacked" style="text-align:center;">
                            <li class="tq">Dashboards</li>
                            <li class="active"><a href="#">Overview</a></li>
                            <li><a href="/order/page/1">Orders</a></li>
                            <li><a href="/shoppingcart">Shopping Cart</a></li>
                            <li><a href="#">My Address</a></li>
                            <li class="tq">More</li>
                            <li><a href="#">New Product</a></li>
                            <li><a href="#">Contact DTXMB</a></li>
                        </ul>
                        <hr class="rw aky">
                    </div>
                </nav>
            </div>
            <div class="hc aps">
                <div class="apa">
                    <div class="apb">
                        <!-- <h6 class="apd">Dashboards</h6> -->
                        <h2 class="apc">Overview</h2>
                    </div>
                    <!-- <div class="ob ape" style="width:260px;">
                        <div class="tn aol">
                            <input type="text" style="padding-left:15px;" value="01/01/15 - 01/08/15" class="form-control" data-provide="datepicker">
                        </div>
                        <span class="ce apn ame">Search</span>
                    </div> -->
                </div>
                <div class="anv alg ala">
                    <h3 class="anw anx">Quick stats</h3>
                </div>
                <div class="fu apt">
                    <div class="gq gg ala">
                        <div class="apu ano">
                            <div class="alz">
                                <span class="anj" style="font-weight:700">Money Spend</span>
                                <h2 class="ani">$120,938<small class="ank anl">5%</small></h2>
                                <hr class="ans akt">
                            </div>
                            <canvas id="sparkline1" width="100%" height="47" class="apv" data-chart="spark-line" data-value="[{data:[28,68,41,43,96,45,100]}]" data-labels="[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;]" style="width: 189px; height: 47px;"></canvas>
                        </div>
                    </div>
                    <div class="gq gg ala">
                        <div class="apu anr">
                            <div class="alz">
                                <div style="float:right;margin-top:-5px;">
                                    <img src="<c:url value=" ${hotproduct.image} " />" style="width:72px;height:72px;border-radius:10px;"></img>
                                </div>
                                <span class="anj" style="font-weight:700">Hot Product - ${hotproduct.name}</span>
                                <h2 class="ani">${hotproduct.sold}<small class="ank anl">1.3%</small></h2>
                                <div>Price: $${hotproduct.price}</div>
                                <hr style="margin-top:9px;" class="ans akt">
                            </div>
                            <canvas id="sparkline1" width="189" height="47" class="apv" data-chart="spark-line" data-value="[{data:[4,34,64,87,96,150,180]}]" data-labels="[&#39;a&#39;, &#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;]" style="width: 189px; height: 47px;"></canvas>
                        </div>
                    </div>
                </div>
                <hr class="aky">
                <div class="fu">
                    <div class="gr ali">
                        <div class="by">
                            <h4 class="ty">Countries</h4>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="tz" style="width: 62.4%;"></span>
                                <span class="dy dh">62.4%</span> United States
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="tz" style="width: 15.0%;"></span>
                                <span class="dy dh">15.0%</span> India
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="tz" style="width: 5.0%;"></span>
                                <span class="dy dh">5.0%</span> United Kingdom
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="tz" style="width: 5.0%;"></span>
                                <span class="dy dh">5.0%</span> Canada
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="tz" style="width: 4.5%;"></span>
                                <span class="dy dh">4.5%</span> Russia
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="tz" style="width: 2.3%;"></span>
                                <span class="dy dh">2.3%</span> Mexico
                            </a>
                        </div>
                        <a href="http://bootstrap-themes.github.io/dashboard/index.html#" class="ce apn ame">All countries</a>
                    </div>
                    <div class="gr ali">
                        <div class="by">
                            <h4 class="ty">Most visited pages</h4>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="dy dh">3,929,481</span> / (Logged out)
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="dy dh">1,143,393</span> / (Logged in)
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="dy dh">938,287</span> /tour
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="dy dh">749,393</span> /features/something
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="dy dh">695,912</span> /features/another-thing
                            </a>
                            <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                                <span class="dy dh">501,938</span> /users/username
                            </a>
                        </div>
                        <a href="http://bootstrap-themes.github.io/dashboard/index.html#" class="ce apn ame">View all pages</a>
                    </div>
                </div>
                <!-- <div class="by">
                    <h4 class="ty">Devices and resolutions
	  </h4>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">3,929,481</span> Desktop (1920x1080)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">1,143,393</span> Desktop (1366x768)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">938,287</span> Desktop (1440x900)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">749,393</span> Desktop (1280x800)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">695,912</span> Tablet (1024x768)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">501,938</span> Tablet (768x1024)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">392,842</span> Phone (320x480)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">298,183</span> Phone (720x450)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">193,129</span> Desktop (2560x1080)
                    </a>
                    <a class="ph" href="http://bootstrap-themes.github.io/dashboard/index.html#">
                        <span class="dy dh">93,382</span> Desktop (2560x1600)
                    </a>
                </div>
                <a href="http://bootstrap-themes.github.io/dashboard/index.html#" class="ce apn ame">View all devices</a> -->
            </div>
        </div>
    </div>
    <div id="docsModal" class="cb fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="ri">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Example modal</h4>
                </div>
                <div class="modal-body">
                    <p>You're looking at an example modal in the dashboard theme.</p>
                </div>
                <div class="rj">
                    <button type="button" class="ce fh" data-dismiss="modal">Cool, got it!</button>
                </div>
            </div>
        </div>
    </div>
    <script src="<c:url value=" /resources/js/mypage/jquery.min.js " />"></script>
    <script src="<c:url value=" /resources/js/mypage/chart.js " />"></script>
    <script src="<c:url value=" /resources/js/mypage/tablesorter.min.js " />"></script>
    <script src="<c:url value=" /resources/js/mypage/toolkit.js " />"></script>
    <script src="<c:url value=" /resources/js/mypage/application.js " />"></script>
</body>

</html>